<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2019/1/14
  Time: 10:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>销售记录</title>
    <jsp:include page="${pageContext.request.contextPath}/common/tag.jsp"/>
</head>
<script>
    $(function () {

        /*绑定类型下拉框*/
        $.post("${pageContext.request.contextPath}/brand/query",function (data) {
            $.each(data,function (index,item) {
                $("#brandid").append("<option value=\""+item.bid+"\">"+item.bname+"</option>");
            })
        });
        $.post("${pageContext.request.contextPath}/fenlei/queryfenlei",function (data) {
            $.each(data,function (index,item) {
                $("#fenleiid").append("<option value=\""+item.fid+"\">"+item.fname+"</option>")
                //$("#fenlei").append("<option value=\""+item.fid+"\">"+item.fname+"</option>")
            })
        });

        $("#xsjltable").bootstrapTable({
            url : '${pageContext.request.contextPath}/sale/query', //路径
            pageSize : 8, //设置每页显示的行数
            pageList:[2,4,8,16], //设置可供选择的页面数据条数
            pageNumber:1, //如果设置了分页，首页页码。
            height : 450,  //表格高度
            pagination : true, //开启分页  默认情况下，是客户端分页的
            sidePagination:'server',  //启用服务器端分页
            striped : true,
            queryParams:function(params){
                var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    limit: params.limit,  //页面大小
                    offset: params.offset, //页码
                    bid : $("#brandid").val(),
                    fid : $("#fenleiid").val(),
                    date1 : $("#date1").val(),
                    date2 : $("#date2").val()
                };
                return temp;
            },
            columns : [
                {field : 'id',title:'编号',align:'center'},
                {field : 'shopId',title:'商品编号',align:'center'},
                {field : 'shopName',title:'商品名称',align:'center'},
                {field : 'shopsize',title:'尺码',align:'center'},
                {field : 'brand.bname',title:'品牌',align:'center'},
                {field : 'shopcolor',title:'颜色',align:'center'},
                {field : 'fenlei.fname',title:'分类',align:'center'},
                {field : 'shopNum',title:'商品数量',align:'center'},
                {field : 'shopPrice',title:'单价',align:'center'},
                {field : 'shopSum',title:'总金额',align:'center'},
                {field : 'shopriqi',title:'销售日期',align:'center'},
                /*{title:'操作',align:'center',
                    formatter: function (index,row,value) {
                        return  "<button onclick=\"tuihuo("+row.dnumbers+")\"  class=\"btn btn-primary\">退货</button>";
                    }
                }*/
            ]
        })
    })
</script>
<body style="margin:20px 10px;overflow-y: hidden;">
    <div>
        <form class="form-inline" style="margin-top: 20px;text-align: right">
            <div class="form-group">
                <label style="font-size: 15px;">品牌：</label>&nbsp;
                <select name="brand" id="brandid" class="form-control">
                    <option value="0">请选择</option>
                </select>
            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label style="font-size: 15px;">分类：</label>&nbsp;
                <select name="fenlei" id="fenleiid" class="form-control">
                    <option value="0">请选择</option>
                </select>
            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label>日期：</label>&nbsp;
                <input type="date" class="form-control" id="date1">
                <label>-</label>&nbsp;
                <input type="date" class="form-control" id="date2">
            </div>
            <button onclick="serch();" class="btn btn-primary btn-lg" type="button"><span class="glyphicon glyphicon-search">搜索</span></button>
        </form>
        <table id="xsjltable"></table>
    </div>
</body>
<script>
    /*点击搜索*/
    function serch() {
        //返回表格的 Options。
        var opts = $("#xsjltable").bootstrapTable("getOptions") ;
        var limit = opts.pageSize ;
        var offset = (opts.pageNumber-1) * limit;
        var bid = $("#brandid").val() ;
        var fid = $("#fenleiid").val();
        var date1 = $("#date1").val();
        var date2 = $("#date2").val();
        //alert(fid);
        $.post("${pageContext.request.contextPath}/sale/query",{'bid':bid,'fid':fid,'date1':date1,'date2':date2,'limit':limit,'offset':offset},function (data) {
            // var mydata = eval("("+data+")") ;
            //重新绑定表格数据
            $("#xsjltable").bootstrapTable('load',data) ;
        })
    }
</script>
</html>
